<template>
	<view class="AnswerResult">
		<view class="header">

		</view>
		<view class="message">
			<view class="avaterAndNickname">
				<image class="avater" :src="userData.avatar"></image>
				<view class="nickName">
				 {{userData.nickname}}
				</view>
			</view>
			<view class="explain">
				<view class="gong">
					共{{zong}}题
				</view>
				<view class="man">
					满分{{zong*5}}分
				</view>

			</view>
		</view>
		<view class="test">
			<view class="title">
				知识测试
			</view>
			<view class="score">
				<view class="score-num">
					{{sum}}
				</view>
				<view class="score-text">
					分
				</view>
			</view>
			<view class="heng"></view>
			<view class="hengbig"></view>
			<view class="rAndW">
				<!-- 答对答错未做 -->
				<view class="rwnot ">
					<view class="right alcen">
						<view class="right-num">
							{{dui}}
						</view>
						<view class="right-text text">
							答对
						</view>
					</view>
					<view class="wromg alcen">
						<view class="wromg-num">
							{{cuo}}
						</view>
						<view class="wromg-text text">
							答错
						</view>
					</view>
					<view class="notdo alcen" v-if="!status">
						<view class="notdo-num">
							{{weiNum}}
						</view>
						<view class="notdo-text text">
							未做
						</view>
					</view>
				</view>

			</view>
			<view class="hengh"></view>
			<view class="time">
				<view class="time-text">
					答题用时
				</view>
				<view class="time-num">
					{{time}}
				</view>
			</view>
		</view>
		<button class="btns returnHome" @click="gotoHome">返回主页</button>
		<button class="btns mistake" @click="gotoMistake">本次错题</button>
		<view class="footer">
			<image class="footerimg" src="https://wlsy.nanjingyunpeng.cn/weixin/image/footerImg.png"></image>
		</view>
	</view>
</template>

<script>
	import {
		userquestionlogs,
		getuserinfo
	} from "../../api/api.js"
	export default {
		data() {
			return {
				zong:0,//总分
				sum: 0, //总分
				dui: 0, //答对
				cuo: 0, //答错
				weiNum: 0, //未做
				time: "", //用时
				userData: {
					avatar: "",
					nickname: "",
				},
				ids:""
			}
		},
		onLoad: function(option) {
			this.getuserinfo()
			// console.log("iiiiiid", option);
			this.zong = option.zong
			this.ids = option.id
			this.sum = option.dui * 5
			this.dui = option.dui
			this.cuo = option.cuo
			this.weiNum = parseInt(option.zong - option.dui - option.cuo)
			this.time = option.time
			this.status = parseInt(option.status)
			// console.log("status",this.status)
		},
		onUnload() {
			uni.switchTab({
				url: '/pages/home/home'
			})
		},
		methods: {
			//   async userquestionlogs(){
			// 	let res = await userquestionlogs()
			// 	console.log("历史大题",res)
			// },
			async getuserinfo() {
				let res = await getuserinfo()
				if (res.code == 1000) {
					// console.log("用户信息", res)
					this.userData.avatar = res.data.avatar
					this.userData.nickname = res.data.nickname
					}
			},
			gotoHome() {
				uni.switchTab({
					url: '/pages/home/home'
				});
			},
			gotoMistake() {
				
				uni.setStorageSync({"users_question_id":this.id})
				uni.navigateTo({
					url: `/pages/problem/mistake?id=${this.ids}`
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.AnswerResult {
		min-width: 100%;
		min-height: 100%;
		background-color: #EEF7FE;
		padding: 30rpx;
		padding-top: 70rpx;
		box-sizing: border-box;

		.header {
			width: 750rpx;
			height: 40rpx;
			background: #466EE7;
			border-radius: 0rpx 0rpx 60rpx 60rpx;
			position: fixed;
			top: 0;
			left: 0;
		}

		.message {
			width: 690rpx;
			height: 88rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			opacity: 1;
			padding: 0 20rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;

			.avaterAndNickname {
				display: flex;
				align-items: center;

				.avater {
					width: 72rpx;
					height: 72rpx;
					margin-right: 8rpx;
					border-radius: 72rpx;
				}
			}

			.explain {
				display: flex;
				align-items: center;

				.gong {
					margin-right: 8rpx;
				}
			}

		}

		.test {
			width: 690rpx;
			height: 578rpx;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			opacity: 1;
			margin-top: 30rpx;
			position: relative;

			.title {
				width: 690rpx;
				height: 88rpx;
				background: linear-gradient(135deg, #F3B96D 0%, #FF5D29 100%);
				border-radius: 30rpx 30rpx 0rpx 0rpx;
				opacity: 1;
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 38rpx;
				text-align: center;
				line-height: 88rpx;
			}

			.score {
				width: 276rpx;
				height: 105rpx;
				position: absolute;
				top: 128rpx;
				left: 266rpx;
				display: flex;

				.score-num {
					font-size: 90rpx;
					font-family: DIN-Bold, DIN;
					font-weight: bold;
					color: #CA1313;
				}

				.score-text {
					font-size: 32rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #CA1313;
					margin-top: 56rpx;
				}

			}

			.heng {
				width: 56rpx;
				height: 6rpx;
				background: #CA1313;
				border-radius: 200rpx 200rpx 200rpx 200rpx;
				opacity: 1;
				position: absolute;
				top: 240rpx;
				left: 300rpx;
			}

			.hengbig {
				width: 96rpx;
				height: 6rpx;
				background: #CA1313;
				border-radius: 200rpx 200rpx 200rpx 200rpx;
				opacity: 1;
				position: absolute;
				top: 260rpx;
				left: 280rpx;

			}

			.rAndW {
				width: 630rpx;
				height: 260rpx;
				background: #F7F8FA;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				opacity: 1;
				position: absolute;
				top: 300rpx;
				margin-left: 30rpx;
				padding: 30rpx;
				box-sizing: border-box;

				.rwnot {
					padding: 0 50rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					font-size: 40rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;

					.alcen {
						text-align: center;
					}

					.text {
						font-size: 32rpx;
						font-family: PingFang SC-Regular, PingFang SC;
					}

					.right-num {
						color: #4B73EA;
					}

					.wromg-num {
						color: #CA1313;
					}
				}
			}

			.hengh {
				width: 470rpx;
				height: 0px;
				opacity: 1;
				border: 0.5rpx solid #E3E3E3;
				position: absolute;
				left: 105rpx;
				top: 450rpx;
			}

			.time {
				width: 550rpx;
				padding: 0 40rpx;
				display: flex;
				box-sizing: border-box;
				justify-content: space-between;
				position: absolute;
				bottom: 50rpx;
				left: 68rpx;

				.time-text {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.time-num {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #4B73EA;
				}
			}
		}


		.btns {
			width: 650rpx;
			height: 88rpx;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			opacity: 1;
			font-size: 32rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			z-index: 99;
		}

		.returnHome {
			background: linear-gradient(1deg, #688EFA 0%, #466EE7 100%);
			position: fixed;
			bottom: 220rpx;
		}

		.mistake {
			background: linear-gradient(135deg, #F3B96D 0%, #FF5D29 100%);
			position: fixed;
			bottom: 100rpx;
		}

		.footer {
			width: 750rpx;
			height: 324rpx;
			position: fixed;
			bottom: 0;
			left: 0;

			.footerimg {
				width: 100%;
				height: 100%;
			}
		}

	}
</style>
